<template>
  <div id="app">
    <span @click="ev_changeName()">{{name}}</span><input type="text" placeholder="请输入搜索内容" v-model="searchText">
    <div class="nullTips" v-if="!mess.length">
      暂时没有数据
    </div>
    <div ref="scrollBox" class="listBox" @scroll="handleScroll" v-if="mess.length">
      <div class="topBox" :style="styleObject"></div>
      <ul class="ulList" :style="listObject">
        <li v-for="(item, idx) in mess" :key="idx" class="li">
          <div class="leftLi">
            <p>{{ item.name }}</p>
            <img :src="item.img" alt="" />
            <p v-html="changeColor(item.text)"></p>
          </div>

          <div class="rightLi">
            <input type="text" v-model="item.num" />
            <input type="button" value="删除" @click="removeLi(item)" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      searchText:'',
      currentIndex:0,
      mess: [],
      allData: [],
      styleObject: {},
      listObject: {},
      name:'',
    };
  },
  created() {
    this.getData();
    this.name=this.$store.state.name;
  },
  watch:{
    searchText(){ 
      this.getMess(this.currentIndex)
    }
  },
  methods: {
    ev_changeName(){
      console.log("aaa")
      var n=Math.ceil(Math.random()*10)
      this.$store.commit('changeName',n)
      console.log(n)
      this.name=this.$store.state.name;
    },
    removeLi(item){
      var messIndex=this.mess.indexOf(item)
      var index=this.allData.indexOf(item)
      this.mess.splice(messIndex,1)
      this.allData.splice(index,1)
      this.getMess(this.currentIndex)
    },
    handleScroll() {
      var scrollTop = this.$refs.scrollBox.scrollTop;
      var index = Math.floor(parseInt(scrollTop) / 40);
      if (index >= this.allData.length-20) {
        index = this.allData.length-21;
      }
      this.styleObject = {
        height: index * 40 + "px",
      };
      this.listObject = {
        height: this.allData.length*40 - index * 40 + "px",
      };
      this.currentIndex=index;
      this.getMess(index);
    },
    async getData() {
      await this.axios("/getData").then((res) => {
        this.allData = res.data;
      });
      if (!this.mess.length) {
        this.getMess(0);
      }
    },
    changeColor(val){
      var reg = new RegExp(this.searchText,"g");
      val=val.replace(reg,'<span style="color:blue">'+this.searchText+'</span>')
      return val
    },
    getMess(index) {
      this.mess = [];
      var count=0;
      for (var i = index; ; i++) { 
        if(count==20){
          break;
        }
        if(i>=this.allData.length){
          break;
        }
        if(this.allData[i].text.indexOf(this.searchText)!=-1){
          this.mess.push(this.allData[i]);
          count++;
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.nullTips{
  font-size: 14px;
}
.topBox {
  height: 0;
}
.listBox {
  height: 600px;
  overflow: hidden;
  overflow-y: scroll;
}
.ulList {
  height: 400000px;
  font-size: 10px;
  .li {
    display: flex;
    height: 40px;
    border: 1px solid;
    justify-content: space-between;
    text-align: left;
    .leftLi{
      display: flex;
    }
    .rightLi{
      display: flex;
    }
  }
}
</style>
